<template>
  <div class="publish">
    <nav-bar />
    <div class="profile">
      <div class="content">
        <div class="avatar">
          <van-image
            height="100%"
            width="100%"
            round
            :src="formatAvatar(name)"
          />
        </div>
        <div class="name van-ellipsis">{{ name }}</div>
        <div class="count">
          <p>产品</p>
          {{ productCount }}
        </div>
        <div class="count">
          <p>文章</p>
          {{ articleCount }}
        </div>
      </div>
    </div>
    <div class="list">
      <van-tabs
        v-model:active="tabActive"
        swipeable
        color="#1c8cfc"
        animated
        sticky
        offset-top="46px"
        @change="onChangeTab"
        :before-change="onBeforeChangeTab"
      >
        <van-tab title="产品" :name="1">
          <product-list
            ref="productListRef"
            :method="'publish'"
            :is-immediate="true"
            @get-total-count="getProductCount"
          />
        </van-tab>
        <van-tab title="文章" :name="2">
          <article-list
            ref="articleListRef"
            :method="'publish'"
            :is-immediate="true"
            @get-total-count="getArticleCount"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavBar from '../../../components/nav-bar.vue'
import ProductList from '../../../components/product-list.vue'
import { getUser } from '../../../service/user'
import { formatAvatar } from '../../../utils/format-avatar'
import ArticleList from '../../../components/article-list.vue'

const route = useRoute()
const name = ref<string>('')
const tabActive = ref<number>(1)
const productCount = ref<number>(0)
const articleCount = ref<number>(0)
const productListRef = ref<InstanceType<typeof ProductList>>()
const articleListRef = ref<InstanceType<typeof ArticleList>>()
const scrollPosition = reactive([
  {
    id: 1,
    position: 0
  },
  {
    id: 2,
    position: 0
  }
])

const getProductCount = (count: number) => {
  productCount.value = count
}
const getArticleCount = (count: number) => {
  articleCount.value = count
}
const loadUser = async () => {
  const id = parseInt(route.params.id as string)
  const res = await getUser(id)
  name.value = res.data.user.name
}
const onBeforeChangeTab = () => {
  const beforeTab = scrollPosition.find((item) => item.id === tabActive.value)
  console.log(document.documentElement.scrollTop, 'top')
  if (beforeTab?.id) beforeTab['position'] = document.documentElement.scrollTop
  return true
}
const onChangeTab = async () => {
  const scroll = scrollPosition.find((item) => item.id === tabActive.value)
  if (scroll?.id) {
    setTimeout(() => {
      document.documentElement.scrollTop = scroll.position
    }, 5)
  }
}
const initData = () => {
  loadUser()
  if (productListRef.value) {
    productListRef.value.list = []
    productListRef.value.finished = false
  }
  if (articleListRef.value) {
    articleListRef.value.list = []
    articleListRef.value.finished = false
  }
}
onMounted(async () => {
  loadUser()
})
onActivated(async () => {
  const forwardRoute = window.history.state.forward
  if (forwardRoute === null) {
    initData()
  }
})
</script>

<style lang="scss" scoped>
.publish {
  height: 100%;
  display: flex;
  flex-direction: column;
  .profile {
    .content {
      background-color: #fff;
      border-radius: 10px;
      height: 120px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .avatar {
        height: 80px;
        width: 80px;
      }
      .name {
        font-size: 20px;
        font-weight: 600;
        max-width: 150px;
      }
      .count {
        text-align: center;
        font-size: 16px;
        p {
          font-size: 18px;
          font-weight: 600;
        }
      }
    }
  }
  .list {
    flex: 1;
    .van-tabs {
      height: 100%;
      :deep(.van-tabs__content) {
        height: calc(100vh - 216px);
      }
      :deep(.van-tab__panel) {
        height: 100%;
      }
    }
  }
}
</style>
